<style>
    .layui-badge-tag {
        height: 20px;
        line-height: 20px;
        padding: 3px 9px;
    }
</style>
<div class="layui-fluid layui-anim febs-anim" id="febs-service-info-detail" lay-title="服务详情">
    <div class="layui-row layui-col-space8 febs-container">
        <input hidden class="detail-params" th:value="${serviceInfo.params}">
        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header layui-row">
                    <div class="layui-col-md4">
                        <div class="layui-row">
                            <div class="layui-col-md6" th:text="${serviceInfo.alias}">
                            </div>
                            <div class="layui-col-md6">
                                <span class="layui-badge-tag layui-badge febs-tag-blue"
                                      th:text="${serviceInfo.name}">febs-tag-blue</span>
                            </div>
                        </div>

                    </div>

                    <div class="layui-col-md4 ">
                        <span class="layui-badge-tag layui-badge febs-bg-cyan" th:text="${serviceInfo.protocol}"></span>
                        <span class="layui-badge-tag layui-badge febs-bg-purple" th:text="${serviceInfo.method}">febs-bg-geekblue</span>
                        <span class="layui-badge-tag layui-badge febs-bg-green" th:text="${serviceInfo.standard}">febs-bg-geekblue</span>
                        <span class="layui-badge-tag layui-badge febs-bg-lime" th:text="${serviceInfo.version}"></span>
                    </div>
                    <div class="layui-col-md2 layui-col-md-offset2">
                        <button class="layui-btn layui-btn-normal btn-apply">接口申请</button>
                    </div>

                </div>
                <div class="layui-card-body">

                    <p class="day-view"></p>
                    <p class="month-view"></p>
                    <!--<div th:text="${serviceInfo.description}">-->
                    <!--</div>-->
                </div>
            </div>
        </div>

        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12 apply-div">
            <div class="layui-card">
                <div class="layui-card-header">
                    接口申请
                </div>
                <div class="layui-card-body">

                    <form class="layui-form" action="" lay-filter="service-apply">
                        <input hidden name="serviceId" th:value="${serviceInfo.serviceId}">
                        <input hidden name="role" value="2">
                        <input hidden name="applyStatus" value="1">
                        <div class="layui-form-item">
                            <label class="layui-form-label">调用频率：</label>
                            <div class="layui-input-block">
                                <input type="radio" name="frequency" value="10000" title="1万次/天" checked>
                                <input type="radio" name="frequency" value="50000" title="5万次/天">
                                <input type="radio" name="frequency" value="100000" title="10万次/天">
                            </div>
                        </div>
                        <div class="layui-row layui-col-space10 layui-form-item">
                            <label class="layui-form-label">调用IP：</label>
                            <div class="layui-input-block">
                                <input name="ips" lay-verify="required|ips"
                                       placeholder="例如：123.23.22.2,12.36.23.3" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="service-apply-submit">提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary reset">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-tab layui-tab-card">
                    <ul class="layui-tab-title">
                        <li class="layui-this">基本信息</li>
                        <li>详细介绍</li>
                        <li>错误码参照</li>
                        <li>SDK</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div>接口地址：<span class="api-path"></span></div>
                            <div>参数列表：</div>
                            <table class="layui-table " lay-filter="parameterTable" id="parameterTable"
                                   lay-data="{id: 'parameterTable',size: 'sm'}">
                            </table>
                        </div>
                        <div class="layui-tab-item" th:text="${serviceInfo.description}">详细介绍</div>
                        <div class="layui-tab-item">错误码参照</div>
                        <div class="layui-tab-item">
                    <pre class="layui-code" lay-title="JavaScript" lay-encode="true">

//  JavaCode
import java.io.DataInputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.net.URLEncoder;
import java.util.HashMap;
import java.util.Map;


public class Test {

    public static void main(String[] args) throws Exception {
        StringBuilder sb = new StringBuilder(
                "https://buy.bianxianmao.com/shop/countInfo");
        Map<String, String> params = new HashMap<String, String>();
        params.put("bxm_id", "前端传过来的bxm_de的值");
        params.put("status","1");//固定值
        params.put("modeltype", "7");//固定值
        String result1 = GetPostUrl(sb.toString(), params, "GET",null, 0, 0);
        System.out.println(result1);

    }

    public static String GetPostUrl(String sendUrl, Map<String, String> params, String sendType, String charset,
            int repeat_request_count, int repeat_request_max_count) {
        URL url = null;
        HttpURLConnection httpurlconnection = null;

        try {
            // 构建请求参数
            StringBuffer paramSb = new StringBuffer();
            if (params != null) {
                for (java.util.Map.Entry<String, String> e : params.entrySet()) {
                    paramSb.append(e.getKey());
                    paramSb.append("=");
                    // 将参数值urlEncode编码,防止传递中乱码
                    paramSb.append(URLEncoder.encode(e.getValue(), "UTF-8"));
                    paramSb.append("&");
                }
                paramSb.substring(0, paramSb.length() - 1);
            }
            url = new URL(sendUrl + "?" + paramSb.toString());
            httpurlconnection = (HttpURLConnection) url.openConnection();
            httpurlconnection.setRequestMethod("GET");
            httpurlconnection.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
            httpurlconnection.setDoInput(true);
            httpurlconnection.setDoOutput(true);

            // 设置http请求超时时间30000毫秒（30秒）
            httpurlconnection.setConnectTimeout(30000);
            httpurlconnection.setReadTimeout(30000);
            httpurlconnection.setUseCaches(true);
            /*
             * if (submitMethod.equalsIgnoreCase("POST")) {
             * httpurlconnection.getOutputStream().write(postData.getBytes("GBK"
             * )); httpurlconnection.getOutputStream().flush();
             * httpurlconnection.getOutputStream().close(); }
             */

            int code = httpurlconnection.getResponseCode();
            if (code == 200) {
                DataInputStream in = new DataInputStream(httpurlconnection.getInputStream());
                int len = in.available();
                byte[] by = new byte[len];
                in.readFully(by);
                String rev = new String(by, "UTF-8");

                in.close();

                return rev;
            } else {
                // http 请求返回非 200状态时处理
                return "<?xml version=\"1.0\" encoding=\"utf-8\" ?>
                        <error>发送第三方请求失败</error>";
            }

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (httpurlconnection != null) {
                httpurlconnection.disconnect();
            }
        }
        return null;
    }

}
                    </pre>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

<script>
    layui.use(['form', 'febs', 'table'], function () {
        var $ = layui.$,
            table = layui.table,
            febs = layui.febs,
            form = layui.form,
            formRepeat = false,
            ss = $('.detail-params').val(),
            serviceId = $('input[name=serviceId]').val(),
            data = JSON.parse(ss);

        form.render();
        $('.apply-div').hide();
        $('.api-path').text(window.location.origin);

        $('.btn-apply').click(function () {
            var text = $(this).text();
            if (text == '接口申请') {
                $('.apply-div').show();
                $(this).text('取消');
            } else {
                $('.apply-div').hide();
                $(this).text('接口申请');
                formRepeat = false;
                $('#febs-service-info-detail').find('.reset').click();
            }
        });

        form.verify({
            ips: function (ip) {
                var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
                var d = ip.split(',');
                for (var i = 0; i < d.length; i++) {
                    if (reg.test(d[i]) == false) return "Ip格式不正确";
                }
            }
        });
        initTable();
        function initTable() {
            //执行渲染
            table.render({
                elem: '#parameterTable' //指定原始表格元素选择器（推荐id选择器）
                , data: data
                , cols: [
                    [{field: 'name', title: '参数', minWidth: 180},
                        {field: 'type', title: '类型', minWidth: 160}]] //设置表头
            });
        }

        /* 监听提交 */
        form.on('submit(service-apply-submit)', function (data) {
            data.field.userId = currentUser.userId;
            data.field.applyPerson = currentUser.username;

            if (formRepeat) {
                formRepeat = false;
                return false;
            } else {
                console.log(data.field);
                formRepeat = true;
                febs.post(ctx + 'userService', data.field, function () {
                    layer.closeAll();
                    febs.alert.success('申请提交成功');
                    $('#febs-service-info-detail').find('.reset').click();
                    $('#febs-service-info-detail').find('.btn-apply').click();
                    return false;
                });
            }
            return false;
        });

        getServicePV(serviceId, "d");
        getServicePV(serviceId, "M");
        function getServicePV(serviceId, range) {
            febs.get(ctx + 'serviceInfo/pv/' + serviceId + '/' + range, null, function (d) {
                console.log("-- query serviceId:" + serviceId + "  range:" + range);
                console.log(d)
                if (range == 'd') {
                    $('.day-view').text("日访问量："+d.data)
                }else if (range == 'M') {
                    $('.month-view').text("月访问量："+d.data)
                }
            })
        }
    });

</script>